<!doctype html>
<html lang="zh-CN">  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="descrption" content="凤凰网是一个分享感动的地方">
    <title>title</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src=".\js\bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/实战.css">
    <script type="text/javascript" src="./js/实战.js"></script>
  </head>
  <body>
    <header class="topmargin43">
      <div class="container widthconm">
        <div class="row">
          <div class="col-sm-6">
            <a href="#" title="回到主页">
              <img src="img/切片/logo.png" alt="logo">
            </a>
          </div>
          <div class="col-sm-6">
            <div class="input-group col-md-6 pull-right" id="searchbar">
              <input class="form-control" type="text">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">搜索</button>
              </span>
              
            </div>
          </div>
        </div>
      </div>
    </header>
    <nav class="navbar navbar-default" id="navgation">
      <div class="container widthconm">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">首页</a></li>
          <li class="dropdown">
            <a class="dropdown-toggle" href="#" data-toggle="dropdown" >真实婚礼
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">后院婚礼</a></li>
              <li><a href="实战例子.html">复古婚礼</a></li>
              <li><a href="#">农场婚礼</a></li>
            </ul>
          </li>
          <li><a href="#">活动</a></li>
        </ul>
      </div>
    </nav>
    <div id="main-content">
      <div class="container  widthconm">
        <div class="row">
          <article class="col-sm-8">
            <h1>文章的标题</h1>
            <footer class="titfooter">
              <time datetime="2017-6-8">
                <span class="glyphicon glyphicon-calendar"></span> 2017-6-8
                </time>
              <span class="nongchang">
                <span class="glyphicon glyphicon-book"></span>
                农场婚礼 
              </span>
              <span  class="nongchang">
                <span class="glyphicon glyphicon-camera"></span> 秋天
              </span>
              <span  class="nongchang">
                <span class="glyphicon glyphicon-comment"></span> 3
              </span>
              
              
            </footer>
            <div class="thumbnail">                        
              <img class="img-responsive" src="./img/1.jpg" alt="婚礼照片">             
              <div class="caption captionbox">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo.                      </p>
              </div>
              <ul class="pager">
                <li class="previous"><a href="#">Previous</a></li>
                <li class="next"><a href="#">Next</a></li>
              </ul>
            </div><!--end thumbnail-->
            <ol class="breadcrumb breadcrumb1">
              <li><a href="#">首页</a></li>
              <li class="active">真实婚礼</a></li>         
            </ol>
            <span class="icon-bow"></span>
            <section>
              <h3>内容的品论
                <span class="badge">3</span>
              </h3>
              <!--品论 媒体布局-->               
              <ul class="media-list">
                <li class="media">
                  <div class="media-left">
                    <a href="#">
                      <img class="img-circle titleimg media-object" src="./img/avatar.jpg" alt="作者">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">
                      为首的非
                      <small datetime="2017-6-9">2017-6-9 16:21</small>
                    </h4>                                                                           
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
                  </div>
                  <ul>
                    <div class="media">
                      <div class="media-left">
                          <a href="#">
                            <img class="img-circle titleimg media-object" src="./img/avatar.jpg" alt="作者">
                          </a>
                        </div>
                        <div class="media-body">
                          <h4 class="media-heading">
                            为首的非
                            <small datetime="2017-6-9">2017-6-9 16:21</small>
                          </h4>                                                                           
                          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
                        </div>
                    </div>
                  </ul>                  
                </li>
                <li class="media">
                  <div class="media-left">
                    <a href="#">
                      <img class="img-circle titleimg media-object" src="./img/avatar.jpg" alt="作者">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">
                      为首的非
                      <small datetime="2017-6-9">2017-6-9 16:21</small>
                    </h4>                                                                           
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
                  </div>
                </li>
              </ul>
            </section>                
          </article> 
          <aside class="col-sm-4" id="sidebar-right">
            <div class="title-line">
              <h3>又选框区域</h3>
            </div>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</p>
          </aside>
        
        
      </div><!--end widthconm-->
    </div><!--end main-content-->
    <aside id="bottom">
      <div class="container widthconm">
      <div class="row">
        <div class="col-sm-4">
          <section>
            <div class="dashed-v">          
              <h4><span>内容区域块一</span></h4>           
              <p>这里是底部内容区块文字，每个区块都是新的内容区域，使用 Bootstrap 布局很容易。</p>
            </div>
          </section>                     
        </div>
        <div class="col-sm-4">
          <section>
            <div class="dashed-v">          
              <h4><span>内容区域块一</span></h4>           
              <p>这里是底部内容区块文字，每个区块都是新的内容区域，使用 Bootstrap 布局很容易。</p>
            </div>
          </section>                     
        </div>
        <div class="col-sm-4">
          <section>
            <div class="dashed-v">          
              <h4><span>内容区域块一</span></h4>           
              <p>这里是底部内容区块文字，每个区块都是新的内容区域，使用 Bootstrap 布局很容易。</p>
            </div>
          </section>                     
        </div>
      </div>
     </div> 
    </aside>
    <footer id="footer">
      <div class="container widthconm">
        &copy; 2013 凤凰社
      </div>
    </footer><!-- end #footer -->
  </body>
</html>